new Vue({
 el:'#iframeVideo',
 data:{
   animeInfo:{},
   episodes:[],
   episodesNum:0,
   episodesStartNum:0,
   video:{},
   p:0,
   id:'',
 },
 methods:{
  readFile(){
   let id = getUrlParams().id;
   let p = getUrlParams().p;
   this.p = parseInt(p);
   this.id = id;
   this.$http.get('./moongoDB/animes').then(response =>{
     let res = response.body;
     if(res){
       let animes = res;
       this.animeInfo = animes.filter( anime => {
          return anime.id == id;
       })[0];
       // 提取当前动漫集数信息
       this.episodes = this.animeInfo.episodes;
       // 视频地址提取
       this.video = this.episodes[p-1];
       // 标题替换
       p <= this.animeInfo.start ?
       document.title = `${this.animeInfo.title} 第${this.video.title}话 | Z-anime`
       : document.title = `${this.animeInfo.title} 第${p-this.animeInfo.start}话 | Z-anime`
       // 集数    
       this.episodesNum = this.animeInfo.episodes.length;
       // 第几集开始正片       
       this.episodesStartNum = this.animeInfo.start;  
            
     }
   },response=>{
     console.log('请求数据失败！');  
   });
 },

  // 返回动漫简介
  toAnimeClick(){
   window.location.href = `/animeInfo?id=${this.id}`;
  },
  // 上下集跳转
  lastClick(){
    window.location.href = `/animeVideo?id=${this.id}&&p=${this.p - 1 }`;
  },
  nextClick(){
   window.location.href = `/animeVideo?id=${this.id}&&p=${this.p + 1 }`;
 },
 // 选集
 toSwitchClick(index){
  window.location.href = `/animeVideo?id=${this.id}&&p=${index + 1 }`;
 }
  
 },

 created(){
   // 路由
   $('.url').html(`
   <span id="indexUrl">Z-anime</span> > 
   <span id="animeUrl" @click="toAnimeClick">{{animeInfo.title}}</span> > 
   <span v-if="p <= episodesStartNum">第{{video.title}}话</span>
   <span v-else>第{{p - episodesStartNum}}话</span>`);

   // 标题
   $('.title1').html(`{{animeInfo.title}}  第{{video.title}}话`);
   $('.title2').html(`{{animeInfo.title}}  第{{p-episodesStartNum}}话 {{video.title}}`);
   
   // 上下集
   $('.ln').html(`
   <span class="last" v-if="p == 1">上一集：没有了</span>
    <span class="last" v-else>上一集：
      <span class="nextButton" @click="lastClick" v-if="p <= episodesStartNum + 1">{{animeInfo.title}} {{episodes[p-2].title}}</span>
      <span class="nextButton" @click="lastClick" v-else>{{animeInfo.title}} 第{{p - episodesStartNum - 1}}话</span>
    </span>

    <span class="next" v-if="p == episodesNum">下一集：没有了</span>
    <span class="next" v-else>下一集：
      <span class="nextButton" @click="nextClick" v-if="p <= episodesStartNum - 1">{{animeInfo.title}} {{episodes[p].title}}</span>
      <span class="nextButton" @click="nextClick" v-else>{{animeInfo.title}} 第{{ p - episodesStartNum + 1}}话</span>
    </span>`);

    // 集数
    $('.episodeUl li').html(`
    <div v-if="index < episodesStartNum"
     :class=" index + 1 == p ? 'active':'' ">
       {{item.title}}
     </div>
       <div :class=" index + 1 == p ? 'active':'' " v-else>
         {{index-episodesStartNum+1}}
     </div>`);

   this.readFile();  
 },

 
});